<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    .box{
      width: calc(240px * 5 + 70px);
      height: 100%;
      margin: 20px auto;
    }
    .box .nav{
      width: calc(240px * 5 + 70px);
      /* height: 100%; */
    }
    .box ul>li{
      width: 240px;
      height: 392px;
      background-color: #f5f5f5;
      margin-right: 10px;
      margin-bottom: 10px;
      text-align: left;
    }
    .box ul{
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      padding: 10px 0;
      box-sizing: border-box;
    }
    .box ul>li img{
      width: 100%;
      height: 258px;
    }
    .box ul>li h3{
      font-size: 14px;
      line-height: 18px;
      margin-top: 10px;
    }
    .box ul>li p{
      margin-top: 20px;
      font-size: 16px;
    }
    .box ul>li p span{
      color: red;
      font-size: 18px;
    }

    /* 分类列表,筛选 */
    .cateBox,.saleBox,.searchBox,.sortBox,.pageBox{
      display: flex;
      width: calc(240px * 5 + 70px);
      overflow: hidden;
    }
    .cateBox .cate_left,
    .saleBox .sale_left,
    .searchBox .search_left,
    .sortBox .sort_left,.pageBox .page_left
    {
      width: 100px;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
    }
    .cateBox .cate_right,
    .saleBox .sale_right,
    .searchBox .search_right,
    .sortBox .sort_right,.pageBox .page_right
    {
     flex: 1;
    }
    .search_right{
      line-height: 30px;
    }
    .page_right{
      margin-top: 10px;
    }
    .search_right>input{
      /* 取消激活框 */
      vertical-align: bottom;
      outline: none;
      box-sizing: border-box;
      
    }
    .cateBox .cate_right ul{
      display: flex;
      flex-wrap: wrap;
    }
    .cateBox .cate_right ul>li{
      width: 80px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin-right: 10px;
      margin-bottom: 10px;
      /* background-color: orange; */
      font-size: 14px;
      padding: 0 10px;
      box-sizing: border-box;
      color: #000;
    }

    .saleBox .sale_right>span,.sortBox .sort_right>span{
      width: 80px;
      height: 40px;
      display: inline-block;
      vertical-align: middle;
      background-color: lavender;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      color: #000;
    }
    #list li  {
      position: relative;
    }
    #list li div{
      position: absolute;
      top: 2px;
      right: 2px;
    }
    #list li>div>span{
      width: 60px;
      height: 40px;
      background-color: red;
      color: #000;
    }
    .active {
      background-color: red !important;
      color: rgb(235, 233, 135) !important;
      font-size: 18px;
      font-weight: bold;
    }
    .cart{
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 80px;
      height: 25px;
      line-height: 25px;
      background-color: #f5f5f5;
      color: skyblue;
      border: 1px solid #fff;
    }
  </style>
</head>
<body>
  <div class="box">
   <div class="nav">
     <!-- 分类列表 -->
     <div class="cateBox">
      <div class="cate_left">
        分类:
      </div>
      <div class="cate_right">
        <ul class="cate_li">
          <!-- <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li>
          <li>大家电</li> -->
        </ul>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="saleBox">
      <div class="sale_left">
        筛选
      </div>
      <div class="sale_right">
        <span class="sale_item" data-sale="hot">畅销</span>
        <span class="sale_item" data-sale="sale">折扣</span>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="searchBox">
      <div class="search_left">
        搜索
      </div>
      <div class="search_right">
       <input type="text" name="" id="" class="ipt">
      </div>
    </div>
    <!-- 排序 -->
    <div class="sortBox">
      <div class="sort_left">
        排序
      </div>
      <div class="sort_right">
        <span class="sort_item" data-method="ASC" data-type="id">综合升序</span>
        <span class="sort_item" data-method="DESC" data-type="id">综合降序</span>
        <span class="sort_item" data-method="ASC" data-type="price">价格升序</span>
        <span class="sort_item" data-method="DESC" data-type="price">价格降序</span>
        <span class="sort_item" data-method="ASC"  data-type="sale">折扣升序</span>
        <span class="sort_item" data-method="DESC" data-type="sale">折扣降序</span>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pageBox">
      <div class="page_left">分页</div>
      <div class="page_right">
          <input type="button" value="上一页" class="prevBtn">
          <span class="totalbox"> 1/77 </span>
          <input type="button" value="下一页" class="nextBtn">
          <select id="select" class="select">
              <option>12</option>
              <option>24</option>
              <option>32</option>
          </select>
    </div>
  </div>
   </div>


    <ul id="list">
      <!-- <li>
        <img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/198920/2/49232/110143/672b8baaFb0e27523/4cadbe7a136fdb39.jpg" alt="">
        <h3>凡士林身体乳</h3>
        <p>价格: ¥ <span>29.9</span></p>
      </li>
      <li></li>
      -->
      
    </ul>
  </div>
</body>
<script src="./axios.js"></script>
<script>
  /*
    列表页的实现:
      1.假数据制作静态页面
      2.注释掉假数据
      3.使用数据渲染页面
  */

 //基准地址
 axios.defaults.baseURL='http://localhost:8888'
 let oList= document.querySelector('#list')
 let oCateItem=document.querySelector('.cate_right>ul')
 let oNav=document.querySelector('.nav')
 let oCateli=document.querySelector('.cate_right>.cate_li')
 let oSaleBox=document.querySelector('.saleBox .sale_right')
 let oSearch=document.querySelector('.searchBox .search_right')
 let oSort=document.querySelector('.sortBox .sort_right')

 //分页相关按钮获取
  var prevBtn = document.querySelector(".prevBtn")
  var nextBtn = document.querySelector(".nextBtn")
  var totalBox = document.querySelector(".totalbox")
  var oSelect = document.querySelector("#select")
 //列表参数放在全局,目的是可以被其他函数修改
 let obj = {
        current: 1,
        pagesize: 12,
        search: "",
        category: "",
        filter: "",
        saleType: "10",
        sortType: "id",
        sortMethod: "ASC"
  }
  let total=0

  //1..获取商品列表
  function getGoodsList(){
    //发送请求获取数据
    axios.get('/goods/list',{
      params:obj
    }).then(res => {
      console.log(res.data);
      let arr=res.data.list
      //空字符串,用来拼接字符串
      let str=''
      // //forEach 遍历数组 数组元素,下标,数组
      // <li>
      //   <img src="https:4cadbe7a136fdb39.jpg" alt="">
      //   <h3>凡士林身体乳</h3>
      //   <p>价格: ¥ <span>29.9</span></p>
      // </li>

      //<a href="09-detail.html?goodsid=${item.goods_id}">把item.goods_id作为url中的参数传递过去
      arr.forEach((item,index,arr)=>{
       str+=`
        <li>
          <a href="09-detail.html?goodsid=${item.goods_id}">
          <div>
            ${item.is_hot ? "<span>畅销</span>":""}
            ${item.is_sale ? "<span>折扣</span>":""}
          </div>
          <img src="${item.img_big_logo}">
          <h3>${item.title}</h3>
          <p>价格 : ¥ <span>${item.current_price}</span></p>
          </a>
         <button class='cart' data-goodsid = ${item.goods_id}>加入购物车</button> 
        </li>
        `
      })
      oList.innerHTML=str
      totalBox.innerHTML=`${obj.current}/ ${res.data.total}`
      //把pagesize的值给下拉列表select
      oSelect.value=obj.pagesize
      //把返回数据res.data.total给变量total
      total=res.data.total
    })
  }
  //调用
  getGoodsList();

  //2.获取分类列表--把获取的分类列表的数据展示到页面,点击哪一项,展示对应的商品分类信息
  function getCateList(){
    //发送请求获取分类列表数据
    axios.get('/goods/category').then(res=>{
      // console.log(res);
      let arr=res.data.list;
      //拼接列表
      let str=''
      // <li>大家电</li>
      arr.forEach(item =>{
        str+=`<li class="cate_item">${item}</li>`
      })
      oCateItem.innerHTML=str
    })
  }
  getCateList()

  //3.点击分类列表,获取对应分类的商品信息 (使用事件委托)
  oNav.onclick=function(e){
    //e.target 代表的是你点击的那个元素
    // console.log(e.target.className);

    //说明你点击的元素是类名为cate_item 的li
    if(e.target.className=='cate_item'){
      //1.点击谁,谁就高亮显示(oCateli.children,返回的是一个数组 代表所有的li标签)
      for (let a = 0; a < oCateli.children.length; a++) {
        //给所有的li 移出active类名
        oCateli.children[a].classList.remove('active')
      }
      //让当前点击的li 添加 active 类名
      e.target.classList.add('active')

      //2.点击谁,就把谁的内容 赋值给 obj中的category
      obj.category=e.target.innerText;
      //调用 getGoodsList(),重新发起请求 (因为此时obj的内容已发生改变)
      getGoodsList()
    }
    //说明你点击的元素是类名为sale_item 的span

    //筛选
    if(e.target.className=='sale_item'){
      // console.log(e.target.className);
      //1.点击谁,谁就高亮显示
      for (let a = 0; a < oSaleBox.children.length; a++) {
       oSaleBox.children[a].classList.remove('active')
      }
      e.target.classList.add('active')

      //2.把当前点击对象对应的 data-sale的值  赋值给 obj.filter
      obj.filter=e.target.dataset.sale
      //调用 getGoodsList(),重新发起请求 (因为此时obj的内容已发生改变)
      getGoodsList()
    } 

    //排序
    if(e.target.className=='sort_item'){
      // console.log(e.target.className);
      //1.高亮显示
      for (let a = 0; a < oSort.children.length; a++) {
        oSort.children[a].classList.remove('active')
      }
      e.target.classList.add('active')

      //2.把获取的自定义属性的值 给obj
      obj.sortType=e.target.dataset.type;
      obj.sortMethod=e.target.dataset.method;
      getGoodsList()
    }

    //分页
    if(e.target.className=='prevBtn'){
      
      //current: 1,pagesize: 12,
      //如果当前页小于1,就终止
      if(obj.current<=1){
        return
      }
      //当前页自减1
      obj.current--
      //刷新页面
      getGoodsList()
    }
    if(e.target.className=='nextBtn'){
      //如果当前页大于total,就终止
      if(obj.current >= total){
        return
      }
      //当前页自增1
      obj.current++
      getGoodsList();
    }

  }

  //搜索 搜索框输入内容后,作为obj.search的值,在此渲染列表
  //onchange事件-当内容发生改变,且失去焦点时触发
  oSearch.onchange=function(e){
    // console.log(e.target.className);
    if(e.target.className =='ipt'){
      //获取输入框输入的值 e.target.value,把值赋值 给 obj.search
      obj.search= e.target.value
      getGoodsList()
    }
  }

//加入到购物车
oList.onclick=function(e){
  if(e.target.className =='cart'){
    axios.post('/cart/add',{
      goodsId:e.target.dataset.goodsid,
      id:localStorage.getItem('id')
    },{
      headers:{
        "content-type": "application/x-www-form-urlencoded",
        "authorization": localStorage.getItem("token")
      }
    }).then(res=>{
      console.log(res);
      if(res.data.code !=1){
        alert('亲,请先登录')
        location.href='03-login.html'
        return
      }
      alert('添加成功')
      location.href = '10-cart.html'
    })
  }
}


</script>
</html>